<template>
  <el-row>
    <el-col :sm="12" :lg="6">
      <el-result
        :icon="list[matchId].icon"
        title="竞赛"
        :sub-title="list[matchId].subtitle"
      >
        <template #extra>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6">
      <el-result
      :icon="list[certificateId].icon"
        title="证书"
        :sub-title="list[certificateId].subtitle"
      >
        <template #extra>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6">
      <el-result
      :icon="list[projectId].icon"
        title="项目"
        :sub-title="list[projectId].subtitle"
      >
        <template #extra>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6">
      <el-result
      :icon="list[practiceId].icon"
        title="实习"
        :sub-title="list[practiceId].subtitle"
      >
        <template #extra>
        </template>
      </el-result>
    </el-col>
  </el-row>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>下面这些网站或许能帮助到你</span>
      </div>
    </template>
    <div  class="text item">
      <a href="https://jwc.wust.edu.cn/">武汉科技大学教务处</a><tr></tr>
      <a href="https://www.saikr.com/">赛氪竞赛网</a><tr></tr>
      <a href="https://coolshell.cn/articles/4758.html#Write_Everywhere,_Read_Nowhere">如何写出无法维护的代码</a><tr></tr>
      <a href="https://www.runoob.com/">菜鸟教程</a><tr></tr>
      <a href="http://cet-bm.neea.edu.cn/">全国大学英语四、六级考试报名网</a><tr></tr>
    </div>
  </el-card>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router'
import { ref } from 'vue'


const route = useRoute()
const name = route.query.name
const id = route.query.id

const router = useRouter()
console.log('home id:'+id)


const list=[
  {
    icon:'success',
    subtitle:'您已经超越了60%的同学了!'
  },
  {
    icon:'warning',
    subtitle:'落后了60%的同学请继续加油吧！'
  }
]
let matchId=0;
let certificateId=1;
let projectId=0;
let practiceId=1;




//console.log("matchstudy id:"+id)
// function getData () {
//    API({
//     url: "/home/match/study",
//     method: "post",
//     data: {
//        id:id
//     },
//   }).then((res) => {
//     console.log(res.data)
//     matchStudyData.list=res.data.dataList
//     console.log("请求成功!" + "请求数据：");
//     console.log('项目名称：'+matchStudyData.list[currentId].projectname );

//     // console.log(loginData.id)
//   });
// };

// const matchStudyData = reactive({
//   list:[{
//     projectid:'',
//     projectname:'',
//     level: "",
//     degree:'',
//     descript: "",
//     date:''
//   }]
// });
// getData()
// if(matchStudyData.list.length>1){
// matchId=0
// }
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 900px;
  margin-left: 80px;
}
</style>

